<template>
  <div class="test-gradient">
    <div class="box" :style="{backgroundImage:gradient}"></div>
    <el-form size="mini" label-width="80px" style="width:300px">
      <el-form-item label="渐变配置">
        <ColorDradient v-model="gradient" @change="onChange"></ColorDradient>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import ColorDradient from "../components/colorDradient";
export default {
  components: {ColorDradient},
  data() {
    return {
      gradient: '',
    };
  },
  methods: {
    onChange() {
      console.log(this.gradient);
    }
  },
};
</script>
<style lang="scss">
.test-gradient {
  .box {
    width: 300px;
    height: 200px;
    margin: 20px;
  }
}
</style>